

	<div class="table-margin">

		<div class="table-header">
			<table class="table table-bordered table-header">
				<thead>
					<tr>
						<td class="w5 text-center">
							<input type="checkbox"	
								   #event   
								   (click)="_selectAll(event.checked, tabVal)"	
								   [checked]="isSelectAll"
								   >
						</td>
						<td class="w5 text-center">序号</td>
						<td class="w25 text-left max-w">规则名称</td>
						<td class="w25 text-left max-w">IP表达式</td>
						<td class="w10 text-center max-w">优先级</td>
						<td class="w10 text-center max-w">规则模式</td>
						<td class="w10 text-center max-w">是否启用</td>
						<td class="w10">操作</td>
					</tr>
				</thead>
			</table>
		</div>

		<div class="table-body">
			<table class="table table-bordered table-header">
				<tbody>
					<tr *ngFor="let tabval of tabVal; let i = index;" [ngClass]="{'active':i%2!=0}">
						<td class="w5 text-center">
							<input type="checkbox"	
								   #event  
								   (click)="_chose(event.checked, tabval.ipRuleId, tabVal.length)"	
								   [checked]="isChose"
								   >
					    </td>
						<td class="w5 text-center">{{ naturalNum+i+1 }}</td>
						<td class="w25 text-left cursor max-w" [title]="tabval.ruleName">{{ tabval.ruleName }}</td>
						<td class="w25 text-left cursor max-w" [title]="tabval.expression">{{ tabval.expression }}</td>
						<td class="w10 text-center" [ngSwitch]="tabval.sortIndex">
							<strong class="text-danger" *ngSwitchCase="0">高</strong>
					        <strong class="text-success" *ngSwitchCase="1">中</strong> 
						    <strong class="text-success" *ngSwitchCase="2">低</strong> 
						</td>					
						<td class="w10 text-center" [ngSwitch]="tabval.ruleMode">
							<strong class="text-danger" *ngSwitchCase="0">禁止</strong>
							<strong class="text-success" *ngSwitchCase="1">允许</strong> 
						</td>
						<td class="w10 text-center" [ngSwitch]="tabval.enabled">
							<strong class="text-danger" *ngSwitchCase="0">禁用</strong>
							<strong class="text-success" *ngSwitchCase="1">启用</strong> 
					    </td>
						<td class="w10">
						    <span class="btn-i" 
						     	  title="详情" 
						     	  data-toggle="modal" 
						     	  data-target="#details" 
								  (click)="details._details(tabval)"
								  *ngIf="right['ip-rule']['details']"
						     	  >
								<img width="14px" height="10px" src="assets/right-product/view.png">
							</span> 
							<span class="btn-i" 
								  title="修改" 
								  data-toggle="modal"	
								  data-target="#edit" 
								  (click)="edit._details(tabval);initService._init(1)"
								  *ngIf="right['ip-rule']['update']"
								  >
								<img width="14px" height="14px" src="assets/right-product/edit.png">
							</span> 
					  </td>
					  <td class="hide">{{ tabval.institutionId }}</td>
					  <td class="hide">{{ tabval.ipRuleId }}</td>
					</tr>
				</tbody>
			</table>
		</div>

	</div>

<!-- 详情 BEGIN -->
	<ip-rule-details #details></ip-rule-details>
<!-- 详情 END -->

<!-- 修改 BEGIN -->
	<ip-rule-edit #edit (onSubmit)="_table()"></ip-rule-edit>
<!-- 修改 END -->

